<template>
  <div>
    <el-card>
      <div slot="header">
        <span class="panel-title home-title">{{ $t('m.Problem_List') }}</span>
        <div class="filter-row">
          <span>
            <el-button
                type="primary"
                size="small"
                @click="goCreateProblem"
                icon="el-icon-plus">
              {{ $t('m.Create') }}
            </el-button>
          </span>
          <span>
            <vxe-input
                v-model="query.keyword"
                :placeholder="$t('m.Enter_keyword')"
                type="search"
                size="medium"
                @search-click="filterByKeyword"
                @keyup.enter.native="filterByKeyword"/>
          </span>
          <span>
            <el-select
                v-model="query.problemListAuth"
                @change="ProblemListChangeFilter"
                size="small"
                style="width: 180px;">
              <el-option :label="$t('m.All_Problem')" :value="0"/>
              <el-option :label="$t('m.Public_Problem')" :value="1"/>
              <el-option :label="$t('m.Private_Problem')" :value="2"/>
            </el-select>
          </span>
        </div>
      </div>
      <vxe-table
          stripe
          auto-resize
          :data="problemList"
          ref="adminProblemList"
          :loading="loading"
          align="center">
        <vxe-table-column min-width="64" field="id" title="ID"/>
        <vxe-table-column
            min-width="100"
            field="problemId"
            :title="$t('m.Display_ID')"/>
        <vxe-table-column
            field="title"
            min-width="150"
            :title="$t('m.Title')"
            show-overflow/>
        <vxe-table-column
            field="author"
            min-width="130"
            :title="$t('m.Author')"
            show-overflow/>
        <vxe-table-column min-width="120" :title="$t('m.Created_Time')">
          <template v-slot="{ row }">
            {{ row.createTime | localtime }}
          </template>
        </vxe-table-column>
        <vxe-table-column
            min-width="96"
            field="modifiedUser"
            :title="$t('m.Modified_User')"
            show-overflow/>
        <vxe-table-column min-width="120" :title="$t('m.Auth')">
          <template v-slot="{ row }">
            <el-select
                v-model="row.auth"
                @change="changeProblemAuth(row)"
                size="small"
                :disabled="!isSuperAdmin && !isProblemAdmin">
              <el-option
                  :label="$t('m.Public_Problem')"
                  :value="1"
                  :disabled="!isSuperAdmin && !isProblemAdmin"/>
              <el-option
                  :label="$t('m.Private_Problem')"
                  :value="2"/>
            </el-select>
          </template>
        </vxe-table-column>
        <vxe-table-column title="Option" min-width="200">
          <template v-slot="{ row }">
            <el-tooltip
                effect="dark"
                :content="$t('m.Edit')"
                placement="top"
                v-if="isSuperAdmin ||
                  isProblemAdmin ||
                  row.author == userInfo.username">
              <el-button
                  icon="el-icon-edit-outline"
                  size="mini"
                  @click.native="goEdit(row.id)"
                  type="primary"/>
            </el-tooltip>
            <el-tooltip
                effect="dark"
                :content="$t('m.Download_Testcase')"
                placement="top"
                v-if="isSuperAdmin || isProblemAdmin">
              <el-button
                  icon="el-icon-download"
                  size="mini"
                  @click.native="downloadTestCase(row.id)"
                  type="success"/>
            </el-tooltip>
            <el-tooltip
                effect="dark"
                :content="$t('m.Delete')"
                placement="top"
                v-if="isSuperAdmin || isProblemAdmin">
              <el-button
                  icon="el-icon-delete-solid"
                  size="mini"
                  @click.native="deleteProblem(row.id)"
                  type="danger"/>
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
      <div class="panel-options">
        <el-pagination
            v-if="showPagination"
            class="page"
            layout="prev, pager, next, sizes"
            @current-change="currentChange"
            :page-size="query.pageSize"
            :total="total"
            :current-page.sync="query.currentPage"
            @size-change="onPageSizeChange"
            :page-sizes="[10, 30, 50, 100]"/>
      </div>
    </el-card>

  </div>
</template>

<script>
import api from '@/common/api';
import utils from '@/common/utils';
import myMessage from '@/common/message';
import {mapGetters} from 'vuex';

export default {
  name: "ProblemList",
  data() {
    return {
      total: 0,
      query: {
        problemListAuth: 0,
        pageSize: 10,
        keyword: '',
        currentPage: 1,
      },
      problemList: [],
      contestProblemMap: {},
      loading: false,
      routeName: '',
      //for make public use
      currentProblemID: '',
      currentRow: {},
      addProblemDialogVisible: false,
      displayId: '',

      showPagination: false,
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(['userInfo', 'isSuperAdmin', 'isProblemAdmin']),
  },
  methods: {
    //初始化
    init() {
      this.routeName = this.$route.name;
      let query = this.$route.query;
      this.query.currentPage = query.currentPage || 1;
      this.query.pageSize = query.pageSize || 10;
      this.query.keyword = query.keyword;
      this.query.problemListAuth = query.problemListAuth ? parseInt(query.problemListAuth) : 0;
      this.getProblemList();
    },

    //跳转至修改题目页面
    goEdit(problemId) {
      if (this.routeName === 'admin-problem-list') {
        this.$router.push({
          name: 'admin-edit-problem',
          params: {problemId},
          query: {
            back: this.$route.fullPath,
          },
        });
      }
    },
    //跳转至创建题目页面
    goCreateProblem() {
      if (this.routeName === 'admin-problem-list') {
        this.$router.push({
          name: 'admin-create-problem',
          query: {
            back: this.$route.fullPath,
          },
        });
      }
    },

    //路由跳转
    pushRouter() {
      this.$router.push({
        name: 'admin-problem-list',
        query: this.query,
      });
    },

    //切换页码回调
    currentChange(page) {
      this.query.currentPage = page;
      this.pushRouter();
    },
    onPageSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.pushRouter();
    },
    //获取题目列表
    getProblemList() {
      let params = {
        limit: this.query.pageSize,
        currentPage: this.query.currentPage,
        keyword: this.query.keyword,
      };
      if (this.problemListAuth != 0) {
        params['auth'] = this.query.problemListAuth;
      }
      this.loading = true;
      if (this.routeName === 'admin-problem-list') {
        api.admin_getProblemList(params).then(
            (res) => {
              this.loading = false;
              this.total = res.data.data.total;
              this.problemList = res.data.data.records;
              this.showPagination = true;
            },
            (err) => {
              this.loading = false;
              this.showPagination = true;
            }
        );
      }
    },

    //修改题目权限
    changeProblemAuth(row) {
      api.admin_changeProblemAuth(row).then((res) => {
        myMessage.success(this.$i18n.t('m.Update_Successfully'));
      });
    },

    //删除题目
    deleteProblem(id) {
      this.$confirm(this.$i18n.t('m.Delete_Problem_Tips'), 'Tips', {
        type: 'warning',
      }).then(
          () => {
            api.admin_deleteProblem(id, null).then((res) => {
              myMessage.success(this.$i18n.t('m.Delete_successfully'));
              this.getProblemList();
            }).catch(() => {
            });
          },
          () => {
          }
      );
    },
    //下载测试用例
    downloadTestCase(problemID) {
      let url = '/api/file/download-testcase?pid=' + problemID;
      utils.downloadFile(url).then(() => {
        this.$alert(this.$i18n.t('m.Download_Testcase_Success'), 'Tips');
      });
    },
    ProblemListChangeFilter() {
      this.query.currentPage = 1;
      this.pushRouter();
    },
    filterByKeyword() {
      this.query.currentPage = 1;
      this.pushRouter();
    },
  },
  watch: {
    $route(newVal, oldVal) {
      this.init();
    },
  },
}
</script>

<style scoped>
.filter-row span button {
  margin-top: 5px;
  margin-bottom: 5px;
}

.filter-row span div {
  margin-top: 8px;
}

@media screen and (max-width: 768px) {
  .filter-row span {
    margin-right: 5px;
  }

  .filter-row span div {
    width: 80%;
  }
}

@media screen and (min-width: 768px) {
  .filter-row span {
    margin-right: 20px;
  }
}
</style>